<template>
	<view class="j-h-image">
		<view class="j-h-i-box">
			<image :src="src"></image>
		</view>
		
		<view class="j-h-i-bottom">
			<view class="j-h-i-o">
				<view class="upload" @tap="uploadTap">选择图片</view>
				
				<view class="upload" @tap="uploadHb">确定</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data() {
			return {
				src:'',
				params:{
					hbImg: '',
				}
			}
		},
		onLoad(e) {
			this.src = e.path;
			this.params.hbImg = e.path;
		},
		methods:{
			// 选择图片
			uploadTap() {
				const self = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						self.src = res.tempFilePaths[0];
						self.params.hbImg = res.tempFilePaths[0];
					}
				});
			},
			// 上传图片
			uploadHb(){
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.$uploadURL,
					filePath: this.params.hbImg,
					header: {
						token: uni.getStorageSync('userInfo').token
					},
					name: 'file',
					success: res => {
						console.log(res);
						if (res.data) {
							// 设置上传图片参数
							this.params.hbImg = JSON.parse(res.data).data;
							// 修改用户信息
							this.postChangeInfo();
						}
					},
					fail: err => {
						console.log(err);
						this.$refs.uToast.show({
							title: '上传虚拟账户图片失败'
						});
					}
				});
			},
			// 修改用户信息
			postChangeInfo() {
				this.$u.api
					.postChangeInfo(this.params)
					.then(res => {
						console.log(res);
						this.$refs.uToast.show({
							title: '修改信息成功'
						});
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					})
					.catch(err => {
						console.log(err);
					});
			},
		}
	}
</script>

<style>
	page{
		background-color: #000000;
	}
</style>
<style scoped lang="scss">
	.j-h-image{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.j-h-i-bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			.j-h-i-o{
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 50rpx;
				font-size: 30rpx;
				
				.upload{
					height: 66rpx;
				}
			}
		}
		
		.j-h-i-box{
			width: 600rpx;
			height: 1200rpx;
			display: flex;
			margin-top: -150rpx;
			
			image{
				height: 100%;
			}
		}
		
		
	}
</style>
